import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
  Card,
  Table,
  Button,
  message,
  Modal,
} from 'antd';
import { ArrowRightOutlined, PlusOutlined } from '@ant-design/icons';
import LinkButton from '../../components/link-button';
import { reqCategorys, reqAddCategory, reqUpdateCategory } from '../../api';
import AddForm from './add-form';
import UpdateForm from './update-form';

const Category = () => {
  // 状态管理
  const [categorys, setCategorys] = useState([]); // 一级分类列表
  const [subCategorys, setSubCategorys] = useState([]); // 子分类列表
  const [parentId, setParentId] = useState('0'); // 当前父分类ID
  const [parentName, setParentName] = useState(''); // 当前父分类名称
  const [loading, setLoading] = useState(false); // 加载状态
  const [showStatus, setShowStatus] = useState(0); // 模态框状态（0:关闭，1:添加，2:修改）

  // 表单引用 
  const formRef = useRef(null); // 共享表单实例
  const categoryRef = useRef({}); // 存储待修改的分类数据

  //数据获取与交互

  // 获取分类列表（优化：合并一级/二级请求逻辑）
  const fetchCategories = async (pid = '0') => {
    setLoading(true);  //在开始获取数据前，将 loading 状态设置为 true，表示数据正在加载中。
    try {
      // 调用后台接口，传入父分类ID（pid='0' 获取一级分类，否则获取子分类）
      const result = await reqCategorys(pid);
      if (result.status === 0) {
        pid === '0' ? setCategorys(result.data) : setSubCategorys(result.data);  //更新 categorys 状态（一级分类列表），否则更新 subCategorys 状态（子分类列表）。
      } else {
        message.error('获取分类列表失败');
      }
    } catch (error) {
      message.error(`网络请求失败: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  // 显示子分类
  const handleShowSubCates = (category) => {
    setParentId(category._id);  //// 记录当前父分类的ID
    setParentName(category.name); // 记录父分类名称
    fetchCategories(category._id);  // 加载该父分类的子分类（二级分类）
  };

  // 返回一级分类
  const handleShowCategories = () => {
    setParentId('0');  // 重置为一级分类
    setParentName(''); // 清空父分类名称
    setSubCategorys([]);   // 清空子分类列表
    setShowStatus(0);  // 关闭模态框
  };


  //表单操作：添加与修改分类

  // 显示添加模态框
  const handleShowAdd = () => setShowStatus(1);

  // 显示修改模态框
  const handleShowUpdate = (category) => {
    categoryRef.current = category;  //// 存储待修改的分类（包含ID、名称等信息）
    setShowStatus(2);  // 设为修改状态，触发模态框显示
  };

  // 添加分类
  const handleAddCategory = async () => {
    if (!formRef.current) return;  // 表单实例不存在时返回（防御性判断）
    try {
      // 验证表单字段（如分类名称是否为空，父分类是否选中）
      const values = await formRef.current.validateFields();  //等待表单验证完成，获取表单中输入的字段值。
      // 调用添加分类接口，传入分类名称和父分类ID
      const result = await reqAddCategory(values.categoryName, values.parentId);  //传入表单中获取的分类名称和父分类 ID，等待后端返回添加分类的结果。
      if (result.status === 0) {
        message.success('添加成功');
        fetchCategories(values.parentId); // 刷新当前分类列表
        formRef.current.resetFields(); // 清空表单输入
        setShowStatus(0);  //将 showStatus 状态设置为 0，关闭添加分类的模态框。
      }
    } catch (error) {
      message.error(`添加失败: ${error.message}`);   // 表单验证失败或接口请求失败
    }
  };

  // 更新分类
  const handleUpdateCategory = async () => {
    if (!formRef.current || !categoryRef.current._id) return;
    try {
      const values = await formRef.current.validateFields();
      // 调用更新接口，传入分类ID和新名称
      const result = await reqUpdateCategory({
        categoryId: categoryRef.current._id,
        categoryName: values.categoryName,
      });
      if (result.status === 0) {
        message.success('更新成功');
        fetchCategories(parentId); // 刷新当前分类列表
        formRef.current.resetFields();
        setShowStatus(0);
      }
    } catch (error) {
      message.error(`更新失败: ${error.message}`);
    }
  };

  // 表格列配置（性能优化：使用useMemo）
  const columns = useMemo(
    () => [
      {
        title: '分类名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '操作',
        width: 300,
        render: (text, record) => (
          <span>
            <LinkButton onClick={() => handleShowUpdate(record)}>
              修改分类
            </LinkButton>
            {parentId === '0' && (
              <LinkButton onClick={() => handleShowSubCates(record)}>
                查看子分类
              </LinkButton>
            )}
          </span>
        ),
      },
    ],
    [parentId]
  );

  // 组件挂载时获取一级分类
  useEffect(() => {
    fetchCategories();  //用于从后端获取一级分类数据，并更新组件的状态以显示这些数据。
  }, []);   //依赖项数组为空[]，表示这个 useEffect 回调函数只会在组件挂载（首次渲染）时执行一次。

  return (
    <Card
      title={parentId === '0' ? '一级分类列表' : (
        <span>
          <LinkButton onClick={handleShowCategories}>一级分类列表</LinkButton>
          <ArrowRightOutlined />
          {parentName}
        </span>
      )}
      extra={<Button type="primary" onClick={handleShowAdd}>
        <PlusOutlined /> 添加
      </Button>}
    >
      <Table
        bordered  //显示表格边框。
        rowKey="_id"
        dataSource={parentId === '0' ? categorys : subCategorys}  //根据parentId切换数据源（一级/二级分类）
        columns={columns}
        loading={loading}
        pagination={{
          pageSize: 5,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />

      {/* 添加模态框*/}
      <Modal
        title="添加分类"
        visible={showStatus === 1}
        onOk={handleAddCategory}  // 点击“确定”时触发添加逻辑
        onCancel={() => {  // 点击“取消”时重置表单并关闭模态框
          setShowStatus(0);
          formRef.current?.resetFields();  // 清空表单输入
        }}
      >
        <AddForm
          categorys={categorys}
          parentId={parentId}
          setForm={(form) => (formRef.current = form)}
        />
      </Modal>

      {/*修改模态框*/}
      <Modal
        title="修改分类"
        visible={showStatus === 2}
        onOk={handleUpdateCategory}
        onCancel={() => {
          setShowStatus(0);
          formRef.current?.resetFields();
        }}
      >
        <UpdateForm
          categoryName={categoryRef.current.name || ''}
          setForm={(form) => (formRef.current = form)}
        />
      </Modal>
    </Card>
  );
};

export default Category;